<template>
  <el-card class="post" shadow="always">
    <div class="post-title">
      <el-avatar :src=" imgUrl+item.user.avatar" fit="fill" :size="45"/>
      <p>
        <span class="user-name">{{ item.user.name }}</span>
        <!--        <span class="create-time">发表文字于 {{ item.createTime }}</span>-->
      </p>
    </div>
    <div class="post-tag">
      <!--      <el-tag size="mini">标签一</el-tag>-->
      <div>
        <el-tag size="mini" type="success">标签二</el-tag>
        {{ item.createTime }}
      </div>
      <!--      <el-tag size="mini" type="info">标签三</el-tag>-->
      <!--      <el-tag size="mini" type="warning">标签四</el-tag>-->
      <!--      <el-tag size="mini" type="danger">标签五</el-tag>-->
    </div>
    <el-divider></el-divider>
    <p @click="goToPostDetail" class="title pointer post-title">{{ item.title }}</p>
    <div class="post-content">
      <img :src="imgUrl+item.faceImage">
      <span class="post-recommend" @click="goToPostDetail" style="margin-left: 1em;">
        {{ item.recommend }}
</span>
      <!--      The interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths aThe interactive example below demonstrates some of the values using Grid Layout. The alignment is done after the lengths a-->

      <!--      <el-image @click="showContent=!showContent" :src="imgUrl+item.faceImage" fit="cover"-->
      <!--                style=" min-width: 190px;height: 105px; display: inline-block;"></el-image>-->
      <div style="margin-left: 1.5em; width: 70%; text-overflow: ellipsis; overflow-y: hidden;">
      </div>
    </div>

    <mavon-editor style="width: 100% ;margin-top: 30px;" v-model="item.content"
                  :toolbars-flag="false" :subfield="false" default-open="preview"/>
    <div class="post-action">
      <el-button size="mini" type="primary" @click="showContent=!showContent">查看</el-button>
      <el-button icon="el-icon-caret-top" size="mini" type="primary">赞同(1000)</el-button>
      <el-button icon="el-icon-caret-bottom" size="mini" type="danger">(100)</el-button>
      <el-button icon="el-icon-chat-dot-square" size="mini">评论(100)</el-button>
      <el-button icon="el-icon-star-off" size="mini" circle></el-button>
    </div>
  </el-card>
</template>

<script>
import service from "@/api";
import post from "@/api/post";

export default {
  name: "PostDetail",
  data() {
    return {
      imgUrl: service.imageURL,
      showContent: false,
      item: {
        "agreement": "",
        "content": "",
        "createTime": "",
        "disagree": "",
        "faceImage": "",
        "id": "",
        "questionId": "",
        "title": "",
        "updateTime": "",
        "userId": ""
      }
    };
  },
  created() {
    this.getData()
  },
  methods: {
    goToPostDetail() {
      console.log(111)
      // this.$router.push({path: '/postDetail', query: {id: this.item.id}})
    },
    getData() {
      console.log(this.$route.query.id)
      post.getPost(this.$route.query.id).then(res => {
        this.item = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.pointer {
  cursor: pointer;
}

.user-name {
  font-size: 1.3em;
  color: #2c3e50;
}

.create-time {
  font-size: .5em;
}

.post-title {
  margin: 10px 0;
  font-weight: bold;
  font-size: 1.3em;
  text-align: left;
}

.max-height-105 {
  max-height: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

}

.post {
  width: 70%;
  margin: 0 auto;
  text-align: left;

  .post-tag {
    display: flex;
    justify-content: flex-end;

    .el-tag {
      margin-right: 10px;
    }

  }

  .post-content {
    //display: flex;
    //justify-content: left;
    //max-height: 105px;
    //overflow-y: hidden;

    img {
      min-width: 190px;
      height: 105px;
      float: left;
      clear: both;
      margin-right: 10px;
      object-fit: cover;
    }

    .post-recommend {
      cursor: pointer;
    }

    .el-image {
      border-radius: 5px;
    }
  }


  .el-divider {
    margin: 10px 0;
  }

  .post-title {
    display: flex;


    p {
      color: #8c939d;
      margin: 0 10px;
      line-height: 45px;
    }
  }

  .post-action {
    display: flex;
    justify-content: end;
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
</style>
